<template>
    <view class="content">

        <view class="area-box">
            <view class="pt20 pb20" v-if="need">
                <view class="pb20">请上传</view>
                <view class="fw" style="gap: 20rpx;">
                    <image src="/static/up.png" class="img" @click="upImg"></image>
                    <view class="img" v-for="i,j of list">
                        <view class="close fc bgf" style="border-radius: 50%;">
                            <image src="/static/images/icon_cross.png" style="width: 36rpx;height: 36rpx;"
                                @click.stop="del(i,j)"></image>
                        </view>
                        <image :src="i.contractUrl" class="img" @click="showImg(list,j)"></image>
                    </view>
                </view>
            </view>




        </view>

        <div class="common-btn">
            <button class="cu-btn block bg-green margin-tb-sm lg" @click="submit">保存</button>
        </div>
        <view class="mask fc" v-show="showdj">
            <view class="djBox">
                <view class="fhc item">
                    <span style="font-size: 16px;">定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金：</span>
                    <input type="digit" placeholder="请输入定金金额" style="font-size: 14px;" v-model="dj" />
                </view>
                <view class="fhc item">
                    <span style="font-size: 16px;">总服务费：</span>
                    <input type="digit" placeholder="请输入总服务费" style="font-size: 14px;" v-model="fwf" />
                </view>

                <view class="fhc item" v-if="item.customerUser.handingMethod==1">
                    <span style="font-size: 16px;">使用时间：</span>
                    <input type="digit" placeholder="请输入使用时间" style="font-size: 14px;" v-model="advDay" />
                </view>

                <view class="fhc item" v-if="item.customerUser.handingMethod==1">
                    <span style="font-size: 16px;">需求金额：</span>
                    <input type="digit" placeholder="请输入需求金额" style="font-size: 14px;" v-model="advAccount" />
                </view>
                <view class="fhc fwb btns">
                    <view class="btn1" @click="showdj = 0">取消</view>
                    <view class="btn2" @click="submit(2)">确定</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                items: [
                    { value: 2, name: '不上传', checked: true },
                    { value: 1, name: '上传' },
                ],
                item: '',
                content: '',
                need: true,
                list: [],
                showdj: 0,
                dj: '',
                fwf: '',
                advDay: '', // 使用时间 
                advAccount: '', //                需求金额
            }
        },
        onLoad(o) {
            this.item = this.getS(`activeCustomerDetail`)
            if (this.item.contractArr) {
                this.list = this.item.contractArr
            }
            if (this.item.deposit && this.item.feeStatus == 0) {
                this.dj = this.item.deposit
                this.fwf = this.item.serCharge
            }


            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
        },
        methods: {
            del(i, j) {
                console.log(333, i);
                api.removeCon({ contractDocIds: [i.contractDocId] }).then(r => { //customerContractId
                    if (r.code == 200) {
                        this.list.splice(j, 1)
                    } else {
                        this.toast(`删除失败`)
                    }
                })

            },
            showImg(urls, current, ) {
                urls = urls.map(i => i.contractUrl)
                uni.previewImage({
                    urls,
                    current,
                });
            },
            upImg() {
                uni.chooseImage({
                    count: 999,
                    success: (r) => {
                        uni.showLoading()
                        let len = r.tempFilePaths.length
                        let succ_n = 0
                        for (let i of r.tempFilePaths) {
                            let filePath = i
                            uni.uploadFile({
                                url: `https://www.jyjkyqhl.com:7778/app/common/upload`,
                                filePath,
                                name: 'file',
                                success: (r) => {
                                    succ_n++
                                    console.log(r, JSON.parse(r.data));
                                    let contractUrl = JSON.parse(r.data).url
                                    api.cusDocAdd({
                                        customerContractId: this.item
                                            .customerContractId,
                                        contractUrl
                                    }).then(r => {
                                        this.list.push(r.data)
                                        if (succ_n == len) {
                                            uni.hideLoading()
                                        }
                                    })
                                },
                                complete: (e) => {
                                    uni.hideLoading()
                                    console.log('eee', e);
                                }
                            })
                        }
                        // let filePath = r.tempFilePaths[0]

                    }
                })
            },
            switch1Change(e) {
                console.log(e);
            },
            async submit(step) {
                if (this.need && this.list.length == 0) return this.toast(`请上传图片`)
                if (step == 2) {
                    if (!this.dj || (this.dj - 0) < 0 || this.dj < 0) return this.toast(`请输入正确的定金`)
                    if (!this.fwf || !(this.fwf - 0) || this.fwf < 0) return this.toast(`请输入正确的服务费`)
                    if (this.item.customerUser.handingMethod == 1) {
                        if (!this.advDay || !(this.advDay - 0) || this.advDay < 0) return this.toast(`请输入正确的使用时间`)
                        if (!this.advAccount || !(this.advAccount - 0) || this.advAccount < 0) return this.toast(
                            `请输入正确的需求金额`)
                    }
                } else if (!this.dj || !this.fwf) {
                    return this.showdj = 1
                }
                this.showdj = 0
                uni.showModal({
                    content: `确定提交合同吗?`,
                    success: (r) => {
                        if (r.confirm) {
                            let data = {
                                customerContractId: this.item.customerContractId,
                                isContractStatus: 7,
                                refuseMsg: this.content,
                                deposit: this.dj,
                                serCharge: this.fwf,
                            }
                            if (this.item.customerUser.handingMethod == 1) {
                                data.advAccount = this.advAccount
                                data.advDay = this.advDay
                            } else {

                            }

                            api.isContract(data).then(r => {
                                this.toast(`提交成功`)
                                setTimeout(_ => {
                                    uni.navigateBack({ delta: 1 })
                                }, 1800)
                            })
                        }
                    }
                })

            },
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
    }

    .checkBox {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        switch {
            margin-left: 20rpx;
        }
    }

    .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .area-box {
            margin-top: 20upx;
            padding: 20upx 24upx;
            background: #fff;

            textarea {
                width: 100%;
                height: 200upx;
                border: 1px solid #f7f7f7;
                border-radius: 8upx;
                padding: 20upx;
            }
        }

    }

    .img {
        width: 220rpx;
        height: 220rpx;
        position: relative;

        .close {
            position: absolute;
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            right: 6rpx;
            top: 6rpx;
            z-index: 999;
        }
    }

    .djBox {
        width: 590rpx;
        padding: 30rpx;
        border-radius: 16rpx;
        background-color: #fff;

        .item {
            background-color: #f5f5f5;
            padding: 24rpx;
            margin-bottom: 32rpx;
            display: flex;

            input {
                flex: 1;
            }
        }

        .btns {
            view {
                padding: 25rpx 96rpx;
                border-radius: 8rpx;
            }

            .btn1 {
                background-color: #f5f5f5;

            }

            .btn2 {
                background-color: #39b54a;
                color: #fff;

            }

        }
    }
</style>